<!DOCTYPE html>
<html>
<head>
  <title> </title>
</head>
<body>
<style>
  .v-enter, .v-leave-to {
    opacity: 0;
  }
  .v-enter-active, .v-leave-active {
    transition: opacity 1s;
  }
</style>
<div id="app">
  <button @click="isMaster = !isMaster">切换身份</button>
  <transition>
    <!-- 此处只写了一个p标签 -->
    <p :key="isMaster ? 'master' : 'other'">{{ isMaster ? '大家好！' : '东家好！' }}</p>
  </transition>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
<script type="text/javascript">
  // 声明 Vue 实例
  let vm = new Vue({
    el: '#app',
    data () {
      return {
        isMaster: true
      }
    }
  })
</script>
</body>
</html>